import React, { Component,Fragment } from 'react';
import './App.css';
import {  Row, Col, Card, Button, } from 'antd';
import { YoutubeOutlined, BackwardOutlined, ForwardOutlined, RiseOutlined, FallOutlined, UpCircleOutlined, DownCircleOutlined} from '@ant-design/icons';

import {HttpClient} from "./commoe/HttpClient";



export default class App extends Component{
  state={
  }
 // 组件挂载之前
 componentWillMount() {
}

// 组件挂载后
componentDidMount() {
}

// 组件卸载之前
componentWillUnmount() {
}

//回调函数
handleQueryData(data){
  HttpClient.query('remoteControl', 'get', {"action":data},res=>{
    console.log(res)
  });
}

  render(){
    return(
      <Fragment >
          <Card style={{}} hoverable={true}>
                <Row gutter={16} style={{marginTop:10}}>
                    <Col span={4}>
                    </Col>
                    <Col span={16}>
                        <span style={{width:'100%',float:'left',fontSize:28,fontFamily:'PingFang SC',fontWeight:'bold',color:'rgba(51,51,51,1)',textAlign:'center'}}>媛媛老婆的专用遥控器</span>
                    </Col>
                    <Col span={4}>
                    </Col>
                </Row>
                <Row gutter={16} style={{marginTop:50}}>
                    <Col span={8}>
                    </Col>
                    <Col span={8}>
                      <Button type="dashed" style={{width:'100%'}} size={'large'} onClick={()=>{this.handleQueryData('lightup')}} >亮度<RiseOutlined/></Button>
                    </Col>
                    <Col span={8}>
                      <Button type="dashed" style={{width:'100%'}} size={'large'} onClick={()=>{this.handleQueryData('lightdown')}} >亮度<FallOutlined /></Button>
                    </Col>
                </Row>
                <Row gutter={16} style={{marginTop:50}}>
                    <Col span={8}>
                      <Button type="dashed" style={{width:'100%'}} size={'large'} onClick={()=>{this.handleQueryData('jinduup')}} ><BackwardOutlined />快退</Button>
                    </Col>
                    <Col span={8}>
                      <Button type="dashed" style={{width:'100%'}} size={'large'} onClick={()=>{this.handleQueryData('speace')}} ><YoutubeOutlined />暂停/播放</Button>
                    </Col>
                    <Col span={8}>
                      <Button type="dashed" style={{width:'100%'}} size={'large'} onClick={()=>{this.handleQueryData('jindudown')}} >快进<ForwardOutlined /></Button>
                    </Col>
                </Row>
                <Row gutter={16} style={{marginTop:50}}>
                    <Col span={8}>
                      <Button type="dashed" style={{width:'100%'}} size={'large'} onClick={()=>{this.handleQueryData('voiceup')}} >音量<UpCircleOutlined /></Button>
                    </Col>
                    <Col span={8}>
                      <Button type="dashed" style={{width:'100%'}} size={'large'} onClick={()=>{this.handleQueryData('voicedown')}} >音量<DownCircleOutlined /></Button>
                    </Col>
                </Row>
          </Card>
      </Fragment>
    )
  }
}
